<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>医疗知识库 - 硅谷小智（医疗版）</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
		<link rel="stylesheet" href="./css/style.css">
		<link rel="stylesheet" href="./css/index.css">
		<style>
			/* 知识库主内容 */
			.knowledge-container {
				max-width: 1200px;
				margin: 30px auto;
				padding: 0 20px;
			}

			.page-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30px;
			}

			.page-title {
				font-size: 28px;
				color: #2c3e50;
			}

			/* 搜索框 */
			.search-container {
				position: relative;
				width: 300px;
			}

			.search-input {
				width: 100%;
				padding: 10px 15px 10px 40px;
				border: 1px solid #ddd;
				border-radius: 25px;
				font-size: 16px;
				outline: none;
				transition: border-color 0.3s;
			}

			.search-input:focus {
				border-color: #2c8a3e;
			}

			.search-icon {
				position: absolute;
				left: 15px;
				top: 50%;
				transform: translateY(-50%);
				color: #777;
			}

			/* 分类导航 */
			.category-nav {
				display: flex;
				margin-bottom: 30px;
				border-bottom: 1px solid #ddd;
			}

			.category-item {
				padding: 10px 20px;
				cursor: pointer;
				font-weight: 500;
				color: #555;
				border-bottom: 3px solid transparent;
				transition: all 0.3s;
			}

			.category-item:hover,
			.category-item.active {
				color: #2c8a3e;
				border-bottom-color: #2c8a3e;
			}

			/* 知识卡片 */
			.knowledge-grid {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
				gap: 25px;
				margin-bottom: 40px;
			}

			.knowledge-card {
				background: white;
				border-radius: 8px;
				overflow: hidden;
				box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
				transition: transform 0.3s, box-shadow 0.3s;
			}

			.knowledge-card:hover {
				transform: translateY(-5px);
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			}

			.card-header {
				padding: 15px;
				background-color: #2c8a3e;
				color: white;
				font-weight: 600;
			}

			.card-body {
				padding: 20px;
			}

			.card-title {
				font-size: 18px;
				margin-bottom: 10px;
				color: #2c3e50;
			}

			.card-content {
				color: #555;
				line-height: 1.6;
				margin-bottom: 15px;
			}

			.read-more {
				display: inline-block;
				color: #2c8a3e;
				font-weight: 500;
				text-decoration: none;
				transition: color 0.3s;
			}

			.read-more:hover {
				color: #2980b9;
			}

			/* 常见问题 */
			.faq-section {
				margin-top: 40px;
			}

			.section-title {
				font-size: 22px;
				color: #2c3e50;
				margin-bottom: 20px;
				padding-bottom: 10px;
				border-bottom: 1px solid #eee;
			}

			.faq-list {
				list-style: none;
			}

			.faq-item {
				background: white;
				border-radius: 8px;
				margin-bottom: 15px;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
				overflow: hidden;
			}

			.faq-question {
				padding: 15px 20px;
				background-color: #f8f9fa;
				font-weight: 600;
				color: #2c3e50;
				cursor: pointer;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.faq-answer {
				padding: 15px 20px;
				color: #555;
				line-height: 1.6;
				display: none;
			}

			.faq-item.active .faq-answer {
				display: block;
			}

			.faq-toggle {
				transition: transform 0.3s;
			}

			.faq-item.active .faq-toggle {
				transform: rotate(180deg);
			}
		</style>
	</head>
	<body>
		<header class="hospital-header">
			<div class="hospital-container">
				<div class="hospital-topbar">
					<div class="hospital-logo" style="margin:18px 105px 0px 8px">
						<img src="./static/imgs/logo.jpg" width="260px" alt="医院标志">
					</div>
					<div class="header-rg">
						<span style="font-size: 14px;">
							<a href="appointments.html" target="_blank"
								style="text-decoration: none; color: dimgray;">预约挂号</a>
							|
							<a href="zhuanjiaList.html" target="_blank"
								style="text-decoration: none; color: dimgray;">专家介绍</a>
							|
							<a href="lyjt.html" target="_blank" style="text-decoration: none; color: dimgray;">来院交通</a>
							|
							<a href="contact.html" target="_blank"
								style="text-decoration: none; color: dimgray;">联系我们</a>
						</span>
						<div class="hospital-search">
							<input type="text" placeholder="搜索..." style="width: 210px;">
							<input type="image" placeholder="搜索..." src="static/imgs/ss.gif">
						</div>
					</div>
				</div>
				<nav class="hospital-nav">
					<nav class="hospital-nav">
						<ul class="nav-menu">
							<li><a href="index.html">首页</a></li>
							<li><a href="zhuanjiaList.html">专家介绍</a></li>
							<li><a href="chat.html">智能预约</a></li>
							<li><a href="#">医疗知识库</a></li>
							<li><a href="appointments.html">我的预约</a></li>
							<li><a href="profile.html">个人中心</a></li>
							<li><a href="lyjt.html">来院交通</a></li>
							<li><a href="contact.html">联系我们</a></li>
						</ul>
					</nav>
			</div>
		</header>

		<!-- 知识库主内容 -->
		<div class="knowledge-container">
			<div class="page-header">
				<h1 class="page-title"><i class="fas fa-book-medical"></i> 医疗知识库</h1>
				<div class="search-container">
					<i class="fas fa-search search-icon"></i>
					<input type="text" class="search-input" placeholder="搜索医疗知识...">
				</div>
			</div>

			<!-- 分类导航 -->
			<div class="category-nav">
				<div class="category-item active" data-category="all">全部</div>
				<div class="category-item" data-category="internal">内科</div>
				<div class="category-item" data-category="surgery">外科</div>
				<div class="category-item" data-category="pediatrics">儿科</div>
				<div class="category-item" data-category="gynecology">妇科</div>
				<div class="category-item" data-category="tcm">中医</div>
				<div class="category-item" data-category="first-aid">急救</div>
			</div>

			<!-- 知识卡片网格 -->
			<div class="knowledge-grid">
				<!-- 内科知识 -->
				<div class="knowledge-card" data-category="internal">
					<div class="card-header">
						内科知识
					</div>
					<div class="card-body">
						<h3 class="card-title">高血压的预防与管理</h3>
						<p class="card-content">
							高血压是一种常见的慢性病，长期未控制会增加心脑血管疾病风险。预防措施包括低盐饮食、规律运动、控制体重和限制饮酒...
						</p>
						<a href="http://www.cmkb.cn/index" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>

				<div class="knowledge-card" data-category="internal">
					<div class="card-header">
						内科知识
					</div>
					<div class="card-body">
						<h3 class="card-title">糖尿病饮食指南</h3>
						<p class="card-content">
							糖尿病患者应遵循均衡饮食原则，控制总热量摄入，选择低GI食物，合理分配碳水化合物、蛋白质和脂肪比例...
						</p>
						<a href="http://www.cmkb.cn/index" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>

				<!-- 外科知识 -->
				<div class="knowledge-card" data-category="surgery">
					<div class="card-header">
						外科知识
					</div>
					<div class="card-body">
						<h3 class="card-title">术后伤口护理要点</h3>
						<p class="card-content">
							术后伤口护理对恢复至关重要：保持伤口清洁干燥、避免剧烈活动、观察有无红肿热痛或渗液、按时换药、遵医嘱服用抗生素...
						</p>
						<a href="http://www.cmkb.cn/index" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>

				<div class="knowledge-card" data-category="surgery">
					<div class="card-header">
						外科知识
					</div>
					<div class="card-body">
						<h3 class="card-title">骨折后的康复训练</h3>
						<p class="card-content">
							骨折康复分为三个阶段：早期以消肿止痛为主，中期开始关节活动度训练，后期加强肌力和功能训练。康复过程需循序渐进...
						</p>
						<a href="http://www.cmkb.cn/index" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>
				<div class="knowledge-card" data-category="surgery">
					<div class="card-header">
						外科知识
					</div>
					<div class="card-body">
						<h3 class="card-title">阑尾炎的症状与治疗</h3>
						<p class="card-content">
							阑尾炎典型症状包括右下腹疼痛、恶心呕吐和低热。治疗方法主要为手术切除（阑尾切除术），早期诊断和治疗可避免穿孔等严重并发症...
						</p>
						<a href="http://www.cmkb.cn/surgery/appendix" class="read-more">阅读更多 <i
								class="fas fa-arrow-right"></i></a>
					</div>
				</div>

				<div class="knowledge-card" data-category="surgery">
					<div class="card-header">
						外科知识
					</div>
					<div class="card-body">
						<h3 class="card-title">疝气的分类与手术选择</h3>
						<p class="card-content">
							疝气分为腹股沟疝、脐疝和切口疝等类型。手术治疗包括传统开放手术和腹腔镜微创手术，术后需避免重体力劳动3个月以防复发...
						</p>
						<a href="http://www.cmkb.cn/surgery/hernia" class="read-more">阅读更多 <i
								class="fas fa-arrow-right"></i></a>
					</div>
				</div>

				<!-- 儿科知识 -->
				<div class="knowledge-card" data-category="pediatrics">
					<div class="card-header">
						儿科知识
					</div>
					<div class="card-body">
						<h3 class="card-title">儿童发热的家庭护理</h3>
						<p class="card-content">
							儿童发热是常见症状，多数由病毒感染引起。家庭护理要点：保持适当室温、多饮水、合理使用退热药(如布洛芬或对乙酰氨基酚)、观察精神状态...
						</p>
						<a href="http://www.cmkb.cn/index" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>

				<div class="knowledge-card" data-category="pediatrics">
					<div class="card-header">
						儿科知识
					</div>
					<div class="card-body">
						<h3 class="card-title">婴幼儿疫苗接种时间表</h3>
						<p class="card-content">
							我国婴幼儿疫苗接种包括一类疫苗(免费)和二类疫苗(自费)。出生时接种乙肝疫苗和卡介苗，1月龄接种乙肝疫苗第二剂...
						</p>
						<a href="http://www.cmkb.cn/index" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>

				<!-- 妇科知识 -->
				<div class="knowledge-card" data-category="gynecology">
					<div class="card-header">
						妇科知识
					</div>
					<div class="card-body">
						<h3 class="card-title">月经不调的常见原因</h3>
						<p class="card-content">
							月经不调可能由多种因素引起，包括激素紊乱、多囊卵巢综合征、甲状腺功能异常、压力过大或体重变化过大等...
						</p>
						<a href="http://www.cmkb.cn/index" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>

				<div class="knowledge-card" data-category="gynecology">
					<div class="card-header">
						妇科知识
					</div>
					<div class="card-body">
						<h3 class="card-title">孕期营养指南</h3>
						<p class="card-content">
							孕期营养对胎儿发育至关重要：需增加蛋白质、铁、钙、叶酸等营养素摄入，控制体重合理增长，避免高糖高脂饮食...
						</p>
						<a href="http://www.cmkb.cn/index" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>

				<!-- 中医知识 -->
				<div class="knowledge-card" data-category="tcm">
					<div class="card-header">
						中医养生
					</div>
					<div class="card-body">
						<h3 class="card-title">四季养生原则</h3>
						<p class="card-content">
							中医强调"天人相应"，四季养生各有侧重：春季养肝宜舒展，夏季养心宜清补，秋季养肺宜润燥，冬季养肾宜温补...
						</p>
						<a href="http://www.cmkb.cn/index" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>

				<div class="knowledge-card" data-category="tcm">
					<div class="card-header">
						中医养生
					</div>
					<div class="card-body">
						<h3 class="card-title">常见体质辨识与调理</h3>
						<p class="card-content">
							中医将体质分为平和质、气虚质、阳虚质、阴虚质等九种。不同体质有不同的调理方法，如气虚质宜补气健脾...
						</p>
						<a href="http://www.cmkb.cn/index" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>

				<!-- 急救知识 -->
				<div class="knowledge-card" data-category="first-aid">
					<div class="card-header">
						急救知识
					</div>
					<div class="card-body">
						<h3 class="card-title">心肺复苏(CPR)操作指南</h3>
						<p class="card-content">
							心肺复苏是抢救心脏骤停患者的关键技术。正确步骤包括：确认环境安全、检查患者反应、呼叫急救、开始胸外按压(每分钟100-120次)...
						</p>
						<a href="http://www.cmkb.cn/index" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>

				<div class="knowledge-card" data-category="first-aid">
					<div class="card-header">
						急救知识
					</div>
					<div class="card-body">
						<h3 class="card-title">海姆立克急救法</h3>
						<p class="card-content">
							用于气道异物梗阻的急救方法：站在患者身后，一手握拳放在肚脐上方，另一手握住拳头，快速向上向内冲击，直到异物排出...
						</p>
						<a href="http://www.cmkb.cn/index" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
					</div>
				</div>
			</div>

			<!-- 常见问题部分 -->
			<div class="faq-section">
				<h2 class="section-title"><i class="fas fa-question-circle"></i> 常见医疗问题</h2>
				<ul class="faq-list">
					<!-- 问题1 -->
					<li class="faq-item">
						<div class="faq-question">
							<span>感冒和流感有什么区别？</span>
							<i class="fas fa-chevron-down faq-toggle"></i>
						</div>
						<div class="faq-answer">
							<p>感冒和流感虽然症状相似，但有明显区别：</p>
							<ul>
								<li>感冒症状较轻，通常表现为鼻塞、流涕、喉咙痛，发热少见或低热</li>
								<li>流感症状较重，突发高热(38°C以上)、全身肌肉酸痛、乏力明显，可能伴有咳嗽和头痛</li>
								<li>感冒多由鼻病毒引起，流感则由流感病毒引起</li>
								<li>流感并发症风险更高，如肺炎等</li>
							</ul>
						</div>
					</li>

					<!-- 问题2 -->
					<li class="faq-item">
						<div class="faq-question">
							<span>如何判断是否需要就医？</span>
							<i class="fas fa-chevron-down faq-toggle"></i>
						</div>
						<div class="faq-answer">
							<p>出现以下情况建议及时就医：</p>
							<ul>
								<li>高热不退(超过3天)或体温超过39°C</li>
								<li>呼吸困难或胸痛</li>
								<li>意识模糊或精神状态异常</li>
								<li>严重呕吐或腹泻导致脱水</li>
								<li>症状持续加重或超过一周未缓解</li>
								<li>慢性病患者症状加重</li>
								<li>婴幼儿、孕妇或老年人出现不适症状</li>
							</ul>
						</div>
					</li>

					<!-- 问题3 -->
					<li class="faq-item">
						<div class="faq-question">
							<span>如何正确测量血压？</span>
							<i class="fas fa-chevron-down faq-toggle"></i>
						</div>
						<div class="faq-answer">
							<p>正确测量血压的要点：</p>
							<ul>
								<li>测量前静坐5分钟，避免运动、咖啡因或吸烟</li>
								<li>坐姿正确，背部挺直，双脚平放，手臂与心脏同高</li>
								<li>使用合适大小的袖带(袖带气囊应包裹上臂的80%)</li>
								<li>测量时不说话，保持放松</li>
								<li>首次测量应检查双上肢血压，取较高值</li>
								<li>建议在不同时间测量2-3次，取平均值</li>
								<li>记录测量结果和测量时间</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<script>
			// FAQ切换功能
			document.querySelectorAll('.faq-question').forEach(question => {
				question.addEventListener('click', () => {
					const faqItem = question.parentElement;
					faqItem.classList.toggle('active');
				});
			});

			// 分类切换功能
			document.querySelectorAll('.category-item').forEach(item => {
				item.addEventListener('click', () => {
					// 更新活动标签
					document.querySelector('.category-item.active').classList.remove('active');
					item.classList.add('active');

					// 获取选择的分类
					const category = item.dataset.category;

					// 显示/隐藏卡片
					document.querySelectorAll('.knowledge-card').forEach(card => {
						if (category === 'all' || card.dataset.category === category) {
							card.style.display = 'block';
						} else {
							card.style.display = 'none';
						}
					});
				});
			});

			// 搜索功能
			const searchInput = document.querySelector('.search-input');
			searchInput.addEventListener('keyup', (e) => {
				if (e.key === 'Enter') {
					const searchTerm = e.target.value.trim().toLowerCase();
					if (searchTerm) {
						// 这里可以添加更复杂的搜索逻辑
						document.querySelectorAll('.knowledge-card').forEach(card => {
							const title = card.querySelector('.card-title').textContent.toLowerCase();
							const content = card.querySelector('.card-content').textContent.toLowerCase();

							if (title.includes(searchTerm) || content.includes(searchTerm)) {
								card.style.display = 'block';
							} else {
								card.style.display = 'none';
							}
						});
					}
				}
			});
		</script>
	</body>
</html>